<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .order-head {
            padding: 0 .6rem;
            margin: .6rem;
            text-align: center;
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff;
        }

        .img-15 {
            height: .75rem;
            width: .75rem;
            margin-right: .2rem
        }

        .copy-btn {
            height: 1.15rem;
            width: 1.9rem;
            line-height: 1.15rem;
            text-align: center;
            background: #FFFFFF;
            border: 1px solid #E5E5E5;
            padding: 0;
            margin-left: .4rem;
        }
    </style>
</head>

<body id="app">

    <section class="font-14 text-color-3">
        <div class="order-head white-bg-radius">
            <div class="font-18 font-semibold" style="padding-top:1rem;margin-bottom:0.6rem">订单待付款</div>
            <div class="text-color-6">
                14分59秒后订单将自动取消，请尽快付款
            </div>
            <div class="btns">
                <button type="button" name="button">取消订单</button>
                <button type="button" name="button">立即付款</button>
            </div>
            <div class="flex-justify-around height-44">
                <div class="flex-align-center">
                    <img class='img-15' src="../image/order/dianhua.png" alt="">
                    <span>致电商家</span>
                </div>
                <div class="flex-align-center">
                    <img class='img-15' src="../image/common/kefu.png" alt="">
                    <span>联系客服</span>
                </div>
            </div>
        </div>
    </section>
    <section style="margin:0.6rem">
        <div class="white-bg-radius text-color-3" style="padding:0.6rem">
            <div class="font-13 " style="margin-bottom:.3rem">
                提货地址
            </div>
            <div class="font-17 font-semibold">福建省福州市鼓楼区快安路128号名城港湾B块5#楼1层09店面</div>
            <div class="font-13 flex-align-center" style="margin:.3rem 0 1.4rem 0">
                <div class="font-semibold">距您1.2km</div>
                <div style="color:#257BF0">
                    查看地图
                </div>
            </div>
            <div class="flex-justify-between">
                <div class="">
                    <div class="text-color-9">
                        提货人
                    </div>
                    <div class="font-semibold">
                        张三
                    </div>
                </div>
                <div>
                    <div class="text-color-9">预留电话</div>
                    <div class="font-semibold">1234567898</div>
                </div>
            </div>
            <div class="height-44 flex-center">
                <img class='img-15' src="../image/order/dianhua.png" alt="" style="margin-right:.2rem">
                <div class="font-14">
                    致电客户
                </div>
            </div>
        </div>
    </section>
    <section class='text-color-3 font-13 white-bg-radius' style="margin:0.6rem;padding:0 0.6rem 0.6rem 0.6rem">
        <div class="shop-head flex-align-center" style="height:2.2rem">
            <img src="../image/index/logo1.png" alt="" style="height:.9rem;width:.9rem;margin-right:0.6rem">
            <div class="flex-align-center font-semibold">
                万嘉便利店
            </div>
        </div>
        <div class="flex" style="position: relative;padding:0.6rem 0">
            <img src="../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
            <div class="">
                <div class="font-semibold">
                    轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡
                </div>
                <div class="flex-justify-between" style="position: absolute;bottom:0;width:calc(100% - 4.7rem)">
                    <div class="text-color-9">
                        ×1
                    </div>
                    <div class="font-12">
                        ¥<span class="font-17">25</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex" style="position: relative;padding:0.6rem 0">
            <img src="../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
            <div class="">
                <div class="font-semibold">
                    轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡
                </div>
                <div class="flex-justify-between" style="position: absolute;bottom:0;width:calc(100% - 4.7rem)">
                    <div class="text-color-9">
                        ×1
                    </div>
                    <div class="font-12">
                        ¥<span class="font-17">25</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <div class="height-38 flex-center-between ">
                <div>优惠券</div>
                <div class="red-text font-12 font-semibold">¥<span class="font-15">2</span></div>
            </div>
            <div class=" height-38 flex-center-between ">
                <span style="width:1.75rem">备注</span>
                <div class="">
                    有空过去取
                </div>
            </div>
            <div class="height-38 flex-center-between ">
                <span>小计</span>
                <div class="red-text font-12 font-semibold">¥<span class="font-17">88</span></div>
            </div>
        </div>
    </section>
    <section style="margin:0.6rem">
        <div class="white-bg-radius text-color-3 font-13 " style="padding:0 0.6rem">
            <div class="font-semibold height-44">
                订单信息
            </div>
            <div class="height-38 flex-center-between">
                <div class="">
                    订单号
                </div>
                <div class="flex-align-center">
                    <div>9630852074109510</div>
                    <button class="copy-btn font-11">复制</button>
                </div>
            </div>
            <div class="height-38 flex-center-between">
                <div>下单时间</div>
                <div>2019-05-23 11:15:48</div>
            </div>

        </div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{

        },
       mounted:{
         this.getDataInfo()
       }
        methods: {
          //获取订单详情信息
            getDataInfo: function() {
                let orderId = $api.pageParam.orderId;
                console.log(orderId)
                api.ajax({
                    url: 'https://hhppapi.hoshiibuy.com/order/detail',
                    method: 'post',
                    data: {
                        body: {
                            orderId: orderId,
                            longitude:0,
                            latitude: 0
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        alert(JSON.stringify(ret));

                    } else {
                        alert(JSON.stringify(err));
                    }
                });

            }
        }
    })
    apiready = function() {
        var path = api.pageParam.name;
        api.parseTapmode();
    };
</script>

</html>
